<template>
    <register  :type="type" :phone="name"  :RegisterPassword="password" :ConfirmPassword="ConfirmPassword" :code="code">
        <span slot="title">Register Web</span>
      <!-- 手机验证 废案 -->
<!--        <p class="input"><input type="text" v-model="name" placeholder="phone">-->
<!--        <p class="input"><input type="text" v-model="password" placeholder="password"></p>-->
<!--        <p class="input"><input type="text" v-model="ConfirmPassword" placeholder="Confirm password"></p>-->
<!--        <p class="verification"><input type="text" v-model="code" placeholder="code"><button @click="SendOutCode()" :disabled="CodeTime()" :style="CodeStyle">{{time}}</button></p>-->
<!--        <span slot="bottom-name">Register</span>-->
              <p class="input"><input type="text" v-model="name" placeholder="email">
              <p class="input"><input type="text" v-model="password" placeholder="password"></p>
              <p class="input"><input type="text" v-model="ConfirmPassword" placeholder="Confirm password"></p>
              <span slot="bottom-name">Register</span>
    </register>
</template>

<script>
    import register from  '../views/login-view'
    export default {
        name: "Register",
        data(){
            return {
                'type':'register',
                 'name':"",
                 'password':'',
                 'ConfirmPassword':'',
                 'code':'',
                 'time':'obtain',
            }
        },
        methods:{
           SendOutCode(){
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.name))){
                   alert("手机号码有误，请重填");
                   return false;
               }

                     var request =  this.myCode();
                    var config = {};
                   config.method='get';
                   config.url='/registerCode'
                   config.params={
                       'phone':this.name,
                   }
                   request(config).then(res=>{
                        console.log(res);
                   })
                 this.time=5;
              var time = setInterval(()=>{
                   if(this.time == 0){
                       this.time='obtain';
                       clearInterval(time);
                       return;
                   }
                    this.time--;
               },1000);
           },
            CodeTime(){
              return !(this.time == 'obtain');
            }
        },
        computed:{
            CodeStyle(){
                return this.CodeTime() ? {background:'#ffc107',color:'white'} : {background:'black'}
            }
        },
        components:{
            register
        }
    }
</script>

<style scoped>

</style>